<template>
  <div class="bg-#F4F4F4 w-100% h-100vh">
    <div class="bg-#fff h-120px pt-30px">
      <div class="flex-c width1200 h-90px">
        <img :src="imglogo" class="w-140px height-60px" />
        <div class="color-#2E2E2E font-size-16px ml-20px">卡余额查询</div>
      </div>
      <div class="bg-#fff border-rd-20px mt-20px width1200 h-510px">
        <stepLine class="pt-60px" :currentStep="currentStep" :stepsList="stepsList" />
        
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { useI18n } from "vue-i18n";
import imglogo from "@/assets/imgs/logo.png";
import stepLine from "@/components/stepLine/index.vue";
import stepok from "@/assets/imgs/stephui.png";

const { t } = useI18n();

const stepsList = ref([
  {
    imgend: stepok,
    decs: "填写卡号",
  },
  {
    imgend: stepok,
    decs: "付款查询",
  },
  {
    imgend: stepok,
    decs: "付款成功",
  },
  {
    imgend: stepok,
    decs: "查询结果",
  },
]);

const currentStep = ref(3);

</script>
